//第一件事就是加载头部 之前定义好了header模块 现在引入就好了
require(['./config'], ()=> {
   require(['template','header','footer'],(template,header)=>{
     class CartPage{
        constructor(){
         //constructor里调用方法
        this.renderCartPage()
        this.checkChange()
        //默认就调用全选的状态方法
        this.setAllCheckState()
        //默认调用一次计算总价的方法
        this.calcTotalPrice()
        //全选 勾选上会发生什么
        this.ifAllCheck()
        //点击增加按钮 增加商品
        this.plusShop()
        //点击减少按钮 减少商品
        this.reduceShop()
        //点击删除按钮 删除意见商品
        this.deleteShop()
        }
        //这里写方法
        //获取localstorage的数据，渲染购物车cartpage页面
        renderCartPage(){
            //取到localstorage里所有的数据 因为在这个购物车逻辑里 cart很重要 在其他逻辑里也要用到，比如说：
            //单选 全选 删除 增加等 所以 把它存到this上 那么 在这个对象里 其他地方也可以访问到这个变量了
            let cart = localStorage.getItem('cart')
            //判断是否有数据,
            //有数据,模板引擎渲染
            if(cart){
               //转为数组
               this.cart=JSON.parse(cart)
               console.log(this.cart)
              $('#template-tbody').html(template('tbody-template',{ cart:this.cart }))
            }
            //没有数据，显示show()一个提示购物车为空的div
            else{
               $('.empty-cart').show()
            }
        }
        //单选按钮状态改变实现的逻辑,别忘记调用
        checkChange() {
          //事件委托给所有单选按钮绑事件
          //把数据this单独用一个变量保存，因为onchange事件里的this跟外面的this不一样
          const _this = this
        $('#template-tbody').on('change','input',function(){
         
          //点击后，去改变每条数据的check属性，那么自然在前端的显示上也是同步的。(根据id找到当前数据--商品)
          const id = $(this).parents('tr').attr('data-id')
          //console.log(id)有结果 说明找到了。
          //通过id来改变数据  check属性，
          _this.cart = _this.cart.map(shop=>{
             if(shop.id==id) shop.check=$(this).prop('checked')
             return shop
          })
          //重新存localstorage 转成字符串才能存 现在的数据就是改变了check属性的心数据
          localStorage.setItem('cart',JSON.stringify(_this.cart))
          //每一次改变单选按钮都去设置一下全选按钮的状态 并且重新计算总价
          _this.setAllCheckState()
          _this. calcTotalPrice()
          //重新计算中数量 待做逻辑有点多


         //  let cart = localStorage.getItem('cart')
         //  //console.log(cart)String 表明是一个字符串
         //  //转化为json数组
         //  cart=JSON.parse(cart)
         //  console.log(cart)
         //  const totalNumber = cart.reduce((totalnumber,shop)=>{
         //       if(shop.check)  totalnumber+=shop.count
         //       return totalnumber
         //  },0)
         // console.log(totalNumber)
         // $('#totalNum,#totalNum2,#totalNumber').html(totalNumber)
         //  let totalnumber = cart.reduce((totalnumber,shop)=>{
         //       if(shop.check){
         //          totalnumber+=shop.count
         //          return totalnumber
         //       }
         //  },0)
         //  console.log(totalnumber)
        })
        }
        //设置全选按钮状态
        setAllCheckState() {
            $('#allCheck').prop('checked',this.cart.every(shop=>shop.check))
         //    let cart = localStorage.getItem('cart')
         //    //console.log(cart)String 表明是一个字符串
         //    //转化为json数组
         //    cart=JSON.parse(cart)
         //    console.log(cart)
         //    const totalNumber = cart.reduce((totalnumber,shop)=>{
         //         if(shop.check)  totalnumber+=shop.count
         //         return totalnumber
         //    },0)
         //   console.log(totalNumber)
         //   $('#totalNum,#totalNum2,#totalNumber').html(totalNumber)

        }
        //计算选中商品总价 在改变单选按钮 全选按钮状态 以及后来的 增加 商品 商品时都会影响总价，把这些操作同步到
        //this.cart数据里，在需要计算计算总价的时候 从this.cart来计算总价，调用这个方法
        calcTotalPrice(){
          // console.log(0)方法调用成功
          const totalPrice = this.cart.reduce((money,shop)=>{
             if(shop.check)  money+=shop.count*shop.price
             return money
          },0)
          $('#totalPrice').html(totalPrice.toFixed(2) )
        }
        //如果全选勾选中，勾中的话 所有都选，如果 全选不勾 ，那么所有都不勾，那么所有的check属性都应该为true并且计算总价
        ifAllCheck() {
         const _this = this
         $('#allCheck').on('change',function(){
               _this.cart.map(shop=>{
               shop.check= $('#allCheck').prop('checked')//已经改变了 所有的商品check属性
               $('#template-tbody').find('input').prop('checked',shop.check)
            })
            localStorage.setItem('cart',JSON.stringify(_this.cart))
            //改变单选框的勾选状态
         //   $('#template-tbody').find('input').prop('checked',shop.check)
            _this. calcTotalPrice()
         })
        }
        //点击增加按钮，增加商品数量 计算 小计 总价
        plusShop(){
        const _this=this
        $('#template-tbody').on('click','#plus',function(){
           //当前点击的增加按钮对应的商品数量加1，用tr上的id属性来做这个事
           const id = $(this).parents('tr').attr('data-id')
           //证明找到了这条数据,接着增加数量,map()遍历，找到这条数据
         //   console.log(id)
           //让这个id对应的商品数量加1
           _this.cart.map((shop)=>{
            if(shop.id==id){
               shop.count++
               //重新存localStorage
               localStorage.setItem('cart',JSON.stringify(_this.cart))
               //实时显示商品数量 重新计算小计 商品总数量 总价
               //.prev()找到这个元素的最近的兄弟元素
               $(this).prev().html(shop.count)
               //小计 这一句就牛逼了。通过这个+按钮，找到父元素td。然后找到这个父元素的兄弟元素，其中带.tatal-price的，然后再通过这个元素
               //找到#partPrice的元素 把价格赋给他
               $(this).parents('td').siblings('.total-price').find('#partPrice').html((shop.price * shop.count).toFixed(2))
               //重新计算总价
               _this.calcTotalPrice()
               //重新计算商品数量 header是接收的参数（模块header实例，用实例调方法）
               header.calcTotalNum()
            }
           })
          
        })
        }
       //点击减少按钮 减少商品数量 计算 小计 总价
       reduceShop(){
         const _this=this
         $('#template-tbody').on('click','#less',function(e){
            //当前点击的增加按钮对应的商品数量加1，用tr上的id属性来做这个事
            const id = $(this).parents('tr').attr('data-id')
            //证明找到了这条数据,接着增加数量,map()遍历，找到这条数据
          //   console.log(id)
            //让这个id对应的商品数量加1
               _this.cart.map((shop)=>{
               if(shop.id==id){
                shop.count--
                if(shop.count>0){
                //重新存localStorage
                localStorage.setItem('cart',JSON.stringify(_this.cart))
                //实时显示商品数量 重新计算小计 商品总数量 总价
                //.prev()找到这个元素的最近的兄弟元素
                $(this).next().html(shop.count)
                //小计 这一句就牛逼了。通过这个+按钮，找到父元素td。然后找到这个父元素的兄弟元素，其中带.tatal-price的，然后再通过这个元素
                //找到#partPrice的元素 把价格赋给他
                $(this).parents('td').siblings('.total-price').find('#partPrice').html((shop.price * shop.count).toFixed(2))
                //重新计算总价
                _this.calcTotalPrice()
                //重新计算商品数量 header是接收的参数（模块header实例，用实例调方法）
                header.calcTotalNum()
                e.preventDefault()
             }
             }
            })
           
         })
       }
       //删除一件商品 filter筛选到id一样的 事件委托 把事件绑给tbody，删除按钮触发
       deleteShop(){
          const _this=this
         $('#template-tbody').on('click','.del',function(){
           if(confirm('宁确定要删除吗?')){
            //获取id
            const id = $(this).parents('tr').attr('data-id')
            //把id一样的删除 重新存localstorage 删除样式 重新计算总价
            _this.cart=_this.cart.filter((shop)=>{
               return id!=shop.id
            })
            localStorage.setItem('cart',JSON.stringify(_this.cart))
            // if(cart=='') console.log(2)
            //删除样式
            $(this).parents('tr').remove()
            //计算商品中数量
            header.calcTotalNum()
            //计算总价
            _this.calcTotalPrice()
            console.log(_this.cart)
           }
         })
       }
     }
     return new CartPage()
   })
})